Color picker
by toddle
Eye dropper
undefined
Hue
Saturation
Lightness
Alpha (Transparency)
Components
color-picker
color-picker-panel
Eye dropper
undefined
Hue
Saturation
Lightness
Alpha (Transparency)
Attributes
color
The current selected color in hex "#bababa" or hsl format "hsl(120, 89%, 59% 1)"
full-width (color-picker only)
If se to True the color-picker will take the full width availabe.
Events
input
The input event fires continuously as the color is updated. This can happen very frequently while e.g. dragging a color slider.
Eye dropper
undefined
Hue
Saturation
Lightness
Alpha (Transparency)
Payload: #d3f0b7
change
The change event happens every time the user makes a deliberate color change e.g. stops dragging a color slider.
Eye dropper
undefined
Hue
Saturation
Lightness
Alpha (Transparency)
Payload: #f7a6a6
Embed
You can embed the color picker as a web-component into any other app. Just copy the snippets below.
color-picker
placeholder
color-picker-panel
Nothing